<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram</title>
</head>
<body>
    <canvas id="circuitCanvas" width="400" height="250"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        function drawBulb(x, y, radius, label) {
            // Save context for local style changes
            ctx.save();
            ctx.strokeStyle = '#505050';
            ctx.lineWidth = 1.5;

            // Outer circle
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, 2 * Math.PI);
            ctx.stroke();

            // Inner filament loop (approximated with a rotated ellipse)
            ctx.beginPath();
            ctx.ellipse(x, y, radius * 0.7, radius * 0.3, -Math.PI / 8, 0, 2 * Math.PI);
            ctx.stroke();

            // Restore context for main drawing styles
            ctx.restore();

            // Draw the label
            ctx.fillStyle = 'black';
            ctx.font = '18px sans-serif';
            ctx.fillText(label, x + radius + 5, y + 6);
        }

        // --- Main Drawing Logic ---
        
        // Define global styles for wires
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;

        // Define coordinates for layout
        const x_left_wall = 60;
        const x_batt_neg = 120;
        const x_batt_pos = 145;
        const x_junction = 220;
        const x_right_end = 350;
        const y_top = 80;
        const y_bottom = 190;
        const bulb_radius = 18;

        // --- Draw Wires and Components ---

        // Main circuit box wires
        ctx.beginPath();
        ctx.moveTo(x_left_wall, y_top); // Top-left corner
        ctx.lineTo(x_batt_neg, y_top); // Wire to battery negative
        ctx.moveTo(x_batt_pos, y_top); // Wire from battery positive
        ctx.lineTo(x_junction, y_top); // To the main T-junction
        ctx.moveTo(x_junction, y_top); // From junction
        ctx.lineTo(x_junction, y_bottom); // Down to bottom wire
        ctx.moveTo(x_junction, y_bottom); // From bottom of junction wire
        ctx.lineTo(x_left_wall, y_bottom); // To left wall
        ctx.moveTo(x_left_wall, y_bottom); // From bottom-left corner
        ctx.lineTo(x_left_wall, y_top); // To top-left corner (closing the box)
        ctx.stroke();
        
        // Branch for Bulb #1
        ctx.beginPath();
        ctx.moveTo(x_junction, y_top);
        ctx.lineTo(x_right_end, y_top);
        ctx.stroke();

        // Battery symbol
        ctx.save();
        ctx.lineWidth = 2; // Thin line for positive
        ctx.beginPath();
        ctx.moveTo(x_batt_pos, y_top - 20);
        ctx.lineTo(x_batt_pos, y_top + 20);
        ctx.stroke();
        ctx.lineWidth = 4; // Thick line for negative
        ctx.beginPath();
        ctx.moveTo(x_batt_neg, y_top - 12);
        ctx.lineTo(x_batt_neg, y_top + 12);
        ctx.stroke();
        ctx.restore();

        // Battery Label (EMF ξ)
        ctx.fillStyle = 'black';
        ctx.font = '22px serif';
        ctx.fillText('ξ', (x_batt_neg + x_batt_pos) / 2 - 5, y_top - 30);

        // Draw the light bulbs
        drawBulb(285, y_top, bulb_radius, '#1');
        drawBulb(x_junction, 135, bulb_radius, '#2');
        drawBulb(140, y_bottom, bulb_radius, '#3');
    </script>
</body>
</html>